<template>
  <div class="pageScroll" :style="{height: scrollHeight + 'px' }" @scroll="scrollHandler">
    <div @touchstart="touchStart($event)" @touchmove="touchMove($event)"
         @touchend="touchEnd($event)">
      <div v-show='pullIndicatorOffset>10' :style="pullIndicatorStyle">
        <div class="circle"></div>
      </div>
      <slot></slot>
    </div>
    <infinite-loading ref="loader" @infinite="infiniteHandler">
      <h3 slot="no-more">
        没有了
      </h3>
      <h3 slot="no-results">
        空空如也
      </h3>
    </infinite-loading>
  </div>
</template>

<script>
  import Vue from 'vue'
  import InfiniteLoading from 'vue-infinite-loading'
  import VuePullRefresh from 'vue-pull-refresh'

  Vue.component('InfiniteLoading', InfiniteLoading)
  Vue.component('VuePullRefresh', VuePullRefresh)

  export default {
    props: {
      infinite: Function,
      refresh: Function,
      height: Number
    },
    data: () => ({
      scrollTop: 0,
      touchStartedY: 0,
      isTouchStarted: 0,
      touchDistance: 0
    }),
    computed: {
      scrollHeight() {
        return this.height || this.wrapperHeight
      },
      pullIndicatorOffset() {
        return this.touchDistance
      },
      pullIndicatorHeight() {
        return this.pullIndicatorOffset + 'px'
      },
      pullIndicatorStyle() {
        return {
          height: this.pullIndicatorHeight,
          lineHeight: this.pullIndicatorHeight,
          // padding: '0 20% 0 0'
        }
      }
    },
    methods: {
      touchStart(event) {
        this.touchStartedY = 0
        if (this.scrollTop === 0) {
          let touch = event.targetTouches[0]
          this.touchStartedY = touch.pageY
          this.isTouchStarted = true
        }
      },
      touchMove(event) {
        if (this.scrollTop === 0) {
          let touch = event.targetTouches[0]
          if (this.isTouchStarted && !this.touchStartedY) {
            this.touchStartedY = touch.pageY
          }
          if (this.touchStartedY) {
            this.touchDistance = touch.pageY - this.touchStartedY
          }
          // console.debug('touchMove', this.touchDistance)
        }
      },
      touchEnd(event) {
        if (this.touchDistance > 50) {
          this.refreshHandler()
        }
        this.isTouchStarted = false
        this.touchStartedY = 0
        this.touchDistance = 0
      },
      refreshHandler($state) {
        if (this.refresh instanceof Function) {
          this.refresh()
        }
        this.$refs.loader.$emit('$InfiniteLoading:reset')
        this.$emit('refresh', $state)
      },
      infiniteHandler($state) {
        if (this.infinite instanceof Function) {
          this.infinite($state)
        }
        this.$emit('infinite', $state)
      },
      scrollHandler(e) {
        this.scrollTop = e.target.scrollTop
      }
    },
    deactivated() {
      sessionStorage.setItem('scrollTop', this.scrollTop + '')
    },
    activated() {
      this.$el.scrollTop = sessionStorage.getItem('scrollTop') || 0
    }
  }
</script>

<style scoped>
  .circle {
    position: absolute;
    left: 50%;
    top: 0;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #aaa;
    transform-origin: 0 20px;
    animation: spin .6s infinite linear
  }

  @keyframes spin {
    to {
      transform: rotate(1turn);
    }
  }
</style>
